  <template>
  <div>
    <VueDragResize
      contentClass="vueDragResize"
      :isDraggable="true"
      :isResizable="false"
      @activated="clicked"
      @dragstop="dragstop"
      :w="50"
      :h="50"
      :y="y"
      :x="x"
      :key="key"
    >
      <i class="el-icon-search"></i
    ></VueDragResize>
  </div>
</template>
<script>
import VueDragResize from 'vue-drag-resize'
export default {
  components: {
    VueDragResize,
  },
  data() {
    return {
      x: document.body.scrollWidth - 270,
      y: 100,
      key: Date.now(),
    }
  },
  computed: {},
  methods: {
    clicked(e) {
      console.log(e)
    },
    open(e) {
      return e => console.log(e)
    },
    dragstop({ left, top }) {
      let { scrollWidth } = document.body
      //   设置X轴的超出范围
      this.x = left > 0 ? (scrollWidth / 2 > left ? -30 : scrollWidth - 270) : -20
      //   设置Y轴的超出范围+
      this.y = top < 65 ? 45 : top > 800 ? 825 : top
      this.key = Date.now()
    },
  },
}
</script>
<style lang="scss" scoped>
.vueDragResize {
  color: #fff;
  background-color: rgba(48, 49, 51, 0.5);
  border-radius: 25%;
  transition: background 0.2s;
  cursor: pointer;
  &:hover {
    background-color: rgba(48, 49, 51, 1);
    left: 0;
  }
  .el-icon-search {
    width: 100%;
    text-align: center;
    margin: auto;
    line-height: 50px;
    font-size: 25px;
  }
}
.dragHandle {
  background-color: #ede;
}
.dragCancel {
  background-color: #ded;
}
</style>
